import { useStore } from '@/hooks';
import { Dialog } from '@alifd/next';
import { t } from '@lingui/macro';
import { observer } from 'mobx-react-lite';
import React from 'react';

const CancelOrderDialog = (props) => {
  const { visible, orderId, onClose } = props;
  const { ccOrderStore: store } = useStore();

  const cancelOrder = async () => {
    try {
      await store.cancel(orderId);
      onClose?.();
    } catch (error) {
      Dialog.error({
        content: t`${error.source.message}`,
      });
    }
  };

  return (
    <Dialog
      v2
      title={t`取消${orderId}订单`}
      visible={visible}
      onClose={onClose}
      onOk={cancelOrder}
    >
      <h3>{t`确定取消当前订单吗？`}</h3>
    </Dialog>
  );
};

export default observer(CancelOrderDialog);
